<template>
  <div class="ProductionDetails">
    <div class="Title">
      <div class="blue"></div>
      <span class="title">生产详情</span>
      <el-button
        class="right-box"
        type="info"
        icon="el-icon-back"
        onclick="window.history.go(-1)"
      >返回</el-button>
    </div>

    <div class="productionDetails">
      <div class="product" :v-model="form">
        <div class="empNumber">
          <span class="yuangong">生产订单</span>
          <el-input class="wb" v-model="form.productionno"></el-input>
        </div>
        <div class="empNumber empss">
          <span class="yuangong">物料</span>
          <el-input class="empwb" v-model="form.rawno"></el-input>
          <el-input class="empwb" v-model="form.rawno"></el-input>
        </div>
        <!-- <div class="empNumber ">
          
        </div>-->
      </div>
      <div class="product">
        <div class="empNumber">
          <span class="yuangong">订单数量</span>
          <template>
            <el-radio v-model="form.isFanGong" label="1">返工单</el-radio>
          </template>
        </div>
      </div>
      <div class="product">
        <div class="empNumber">
          <span class="yuangong">订单数量</span>
          <el-input class="wb" v-model="form.ordernumber"></el-input>
        </div>
        <div class="empNumber">
          <span
            class="yuangong"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仓库</span>
          <el-input class="wb" v-model="form.ck"></el-input>
        </div>
        <div class="empNumber">
          <span class="yuangong">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工艺流程</span>
          <el-input class="wb" v-model="form.process"></el-input>
        </div>
        <div class="empNumber">
          <span
            class="yuangong"
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参考</span>
          <el-input class="wb" v-model="form.cankao"></el-input>
        </div>
        <div class="empNumber">
          <span class="yuangong">计划方法</span>
          <el-input class="wb" v-model="form.planmethod"></el-input>
        </div>
        <div class="empNumber">
          <span class="yuangong">生产起始日期</span>
          <el-input class="wb" v-model="form.starton"></el-input>
        </div>
        <div class="empNumber">
          <span class="yuangong">要求交货日期</span>
          <el-input class="wb" v-model="form.jiaohuodate"></el-input>
        </div>
        <div class="empNumber">
          <span class="yuangong">计划交货日期</span>
          <el-input class="wb" v-model="form.planon"></el-input>
        </div>
      </div>
      <div class="product">
        <div class="lefts" @mousemove="mousemove" @mouseout="mouseout">
          <img src="../../assets/images/AnQuanKuCun/u88813.jpg" alt />
        </div>
        <div class="right" >
         <div class="right_1" v-show="showimg">
            <div class="f1">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="工艺名称">
                <el-input v-model="form.componyno"></el-input>
              </el-form-item>
              <el-form-item label="时产能">
                <el-input v-model="form.creditlines"></el-input>
              </el-form-item>
              <el-form-item label="设备类型">
                <el-input v-model="form.linkman"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f2">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="领料类型">
                <el-input v-model="form.componyname"></el-input>
              </el-form-item>

              <el-form-item label="报废率">
                <el-input v-model="form.expriedebt"></el-input>
              </el-form-item>

              <el-form-item label="设备名称">
                <el-input v-model="form.linkphone"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f3">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="注意事项">
                <el-input v-model="form.componyname"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f4">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="原料名称">
                <el-input v-model="form.componyname"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f4">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="原料料号">
                <el-input v-model="form.componyname"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="f4">
            <el-form :model="form" class="demo-form-inline" label-width="130px">
              <el-form-item label="数量">
                <el-input v-model="form.componyname"></el-input>
              </el-form-item>
            </el-form>
          </div>
         </div>
        </div>
      </div>
    </div>
    <div class="empphone_Btn">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-button type="primary">确认</el-button>
          <el-button type="info" onclick="window.history.go(-1)">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        radio: "false"
      },
      index: "0",
      radio: "",
      Detail: "",
      Row: "",
      showimg:false
    };
  },
  created() {
    this.Detail = this.$route.query.prod;
    this.Row = this.$route.query.row;
    console.log(this.$route.query.prod);
    console.log(this.$route.query.row);
    this.getdetail();
  },
  methods: {
    getdetail() {
      var obj = {
        productionno: this.Detail,
        productno: this.Row
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ProductionManagement.asmx/Det?index=1" + "&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("详情");
        console.log(datas);
        var detaillist = JSON.parse(datas.string.__text);
        console.log(detaillist);
        this.form = detaillist.sour;
        var dd = new Date(parseInt(detaillist.sour.starton.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        detaillist.sour.starton = y + "-" + m + "-" + d + " ";
        var dd = new Date(parseInt(detaillist.sour.jiaohuodate.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        detaillist.sour.jiaohuodate = y + "-" + m + "-" + d + " ";
        var dd = new Date(parseInt(detaillist.sour.planon.substr(6, 13)));
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = dd.getDate();
        d = d < 10 ? "0" + d : d;
        detaillist.sour.planon = y + "-" + m + "-" + d + " ";
      });
    },
    mousemove(){
      this.showimg=true
    },
    mouseout(){
      this.showimg=false
    }

  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.ProductionDetails {
  width: 98%;
  height: 700px;
  //   border: 1px solid red;
}
.Title {
  width: 99%;
  height: 35px;
  margin-top: 10px;
}
.blue {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  margin-left: 20px;
  margin-top: 5px;
  float: left;
}
.title {
  margin-left: 10px;
  line-height: 35px;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
}
.productionDetails {
  width: 97%;
  //   height: 500px;
  background-color: white;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid $linecolor;
}
.product {
  width: 98%;
  margin: 0 auto;
}
.product:nth-child(1) {
  border-bottom: 1px solid $linecolor;
}
.empNumber {
  width: 23%;
  height: 50px;
  margin-top: 20px;
  margin-left: 15px;
  // border: 1px solid #000;
  display: inline-block;
  min-width: 165px;
  //   max-width:165px;
}
.yuangong {
  line-height: center;
  font-size: 14px;
  // border: 1px solid #000;
}
.wb {
  width: 66%;
}
.empphone_Btn {
  width: 99%;
  height: 100px;
  margin-top: 30px;
  text-align: center;
  // border: 1px solid #000;
}
.lefts {
  width: 55%;
  height: 430px;
  border: 1px solid $linecolor;
  border-radius: 5px;
  margin-top: 10px;
  display: inline-block;
  img {
    width: 99.5%;
    height: 98%;
    border-radius: 5px;
    // border: 1px solid #000;
  }
}
.right {
  width: 44.5%;
  height: 430px;
  border: 1px solid $linecolor;
  border-radius: 5px;
  margin-top: 10px;
  float: right;
  background-color: whitesmoke;
}
.empss {
  width: 40%;
  // border: 1px solid #000;
}
.empwb {
  width: 40%;
}
.f1,
.f2 {
  width: 48%;
  float: left;
  margin-top: 15px;
}
.f3 {
  width: 96%;
}
.f4 {
  width: 48%;
  display: inline-block;
  // float: right;
  float: left;
  // border: 1px solid #000;
}
</style>
